<template>
    <div class="box">
        <div class="box1">
            <span>新建账号</span>
            <el-button type="danger" style="float: right;margin-right: 20px;margin-top: 10px;" @click="addloginrr">创建</el-button>
            <el-button type="info" style="float: right;margin-right: 20px;margin-top: 10px;">取消</el-button>
        </div>
        <div class="box2">
            <el-form :model="form" label-width="120px">
                <el-form-item label="账号">
                    <el-input v-model="form.username" width="100px" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="角色">
                    <el-select v-model="form.pid" placeholder="请选择角色">
                        <el-option label="全部" value="" />
                        <el-option v-for="(item, idx) in role" :key="item" :label="item.name" :value="item._id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="form.name" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="form.phone" placeholder="请输入" />
                </el-form-item>
                <el-form-item label="初始密码">
                    <el-input v-model="form.password" placeholder="请输入" />
                </el-form-item>
            </el-form>
            
        </div>
    </div>
</template>

<script setup>
import { reactive, ref ,defineComponent,onMounted} from 'vue'
import router from '@/router';
import axios from 'axios';
import CryptoJS from 'crypto-js';
import { getData } from "@/utils/way";
const form = reactive({
    username: '',
    name:"",
    password:"",
    phone:"",
    pid:""
})
const list = ref([])
const role = ref([])
let getlist = async ()=>{
  let {data} = await getData('/jsb/getrole')
  role.value = data.list
  console.log(data);
}
const  addloginrr= async() => {
    const {data} =await axios.post('http://localhost:3000/jsb/addloginrr',form)
   if(data.code == 200){
    router.push('/index/System')
}
   }

onMounted(() => {
    getlist()
})

</script>

<style lang="scss" scoped>
.box {
    width: 80%;
    height: 100%;
    background-color: #fff;
    margin-left: 20px;
    margin-top: 20px;
}

.box1 {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #ccc;
    line-height: 50px;

    span {
        margin-left: 20px;
    }
}

.box3 {
    width: 100%;
    height: 50px;
    line-height: 50px;
    span {
        margin-left: 60px;
    }
}

.box2 {
    width: 100%;
    height: 100%;
    margin-top: 20px;

    .el-form {
        width: 40%;
        margin-left: 20px;
    }
}
</style>